<template>
    <div class="user-list">
        <div class="item">
            <el-table
                    :data="target"
                    row-key="uid"
                    border
            >
                <el-table-column
                        prop="name"
                        label="已选择用户"
                >
                    <template slot-scope="scope">
                        <el-button type="text">{{scope.row.name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <i class="el-icon-delete" @click="() => delUser(scope)"></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="item">
            <el-table
                    v-loading="loading"
                    :data="data.list"
                    row-key="uid"
                    border
            >
                <el-table-column label="待选择用户" >
                    <template slot-scope="scope">
                        <el-button type="text" :class="{'danger-color':hasUser(scope.row)}" >{{scope.row.name}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <i class="el-icon-plus" v-if="!hasUser(scope.row)"  @click="() => addUser(scope)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    small
                    class="page"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage3"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="Number(data.total) || 0"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
    import $ from "jquery";

    export default {
        props:{
            target:{
                type: Array,
                default: () => {
                    return []
                }
            },
            searchUserUrl:{
                type: String,
                default: "/api/v20/user/list"
            }
        },
        data(){
            return {
                data: {
                    list:[],
                    total: 0
                } ,
                currentPage3: 1,
                loading: false,
                search: "",
                timer: null
            }
        },
        watch:{
            search(nv){
                if(this.timer){
                    clearTimeout(this.timer);
                }
                this.timer = setTimeout(() => {
                    this.loadUsers(nv);
                },200);
            }
        },
        mounted() {
           this.loadUsers()
        },
        methods:{
            hasUser(v){
                return this.target.find(e => e.uid === v.uid);
            },
            loadUsers(key){
                this.loading = true;
                $.get(this.searchUserUrl /*"/api/v20/user/list"*/, {key, page: this.currentPage3, size: 10}, json => {
                    this.loading = false;
                    this.data = json.data || {};
                }, "json") ;
            },
            handleCurrentChange(){
                this.loadUsers()
            },

            addUser(s){
                console.log(this)
                if(this.target.find(e => s.row.uid == e.uid)){
                    this.$notify.warning({
                        title: '消息',
                        message: '已经有该用户了'
                    });
                    return
                }
                this.target.unshift(s.row);
                this.$emit('user-add', s.row);
            },
            delUser(s){
                this.target.splice(s.$index, 1) ;
                this.$emit('user-del', s.row);
            }
        },
    }
</script>

<style>
    /*.el-message{*/
    /*    right: 20px*/
    /*}*/
</style>
<style scoped lang="less">
    .choice{
        color: #409EFF;
    }
    .user-list{
        display: flex;
        flex-direction: row;

        .el-icon-plus{
            color: #409EFF;
            cursor: pointer;
            font-size: 22px;
        }
        .el-icon-edit{
            color: #E6A23C;
            cursor: pointer;
            font-size: 22px;
        }
        .el-icon-delete{
            color: #F56C6C;
            cursor: pointer;
            font-size: 22px;
        }

        .item{
            flex: 1;

            &:first-child{
                margin-right: 10px;
            }
        }
    }
   ///* .box{*/
   /*     display: flex;*/
   /*     align-items: center;*/
   /* }*/
   /*.page{*/
   /*    margin-top: 10px;*/
   /*}*/
   /* .transfer{*/
   /*     display: flex;*/
   /*     flex-direction: row-reverse;*/
   /*     !*justify-content: space-around;*!*/
   /*     align-items: center;*/
   /*     width: 100%;*/

   /*     .el-transfer__buttons{*/
   /*         flex-direction: row-reverse;*/
   /*     }*/
   /* }*/
</style>